<template>
	<view>

		<view class="success-box">

			<view class="finished" @click="toVip">
				完成
			</view>

			<view class="success-warpper">
				<view style="text-align: center;">
					<img class="success-icon" src="http://xcx.itcwc.com/wxImg/20250704140921.png" alt="">
					<view class="success-text">支付成功</view>
				</view>
			</view>
			<view class="pay-total">
				￥{{queryInfo.payMoney}}
			</view>
			<view class="pay-detail">
				<view class="pay-detail-item">
					<text>商品</text>
					<text>{{queryInfo.goodsName}}</text>
				</view>
				<view class="pay-detail-item">
					<text>支付方式</text>
					<text>{{queryInfo.payType}}</text>
				</view>
			</view>
			<!-- 	<view class="ad-box">
				<base-ad :adInfo="buttomAdInfo" v-if="buttomAdInfo"></base-ad>
				
			</view> -->
			<!-- #ifdef MP-WEIXIN-->
			<view class="ad-box" style="min-height: 200px;">
				<base-ad :adInfo="buttomAdInfo" v-if="buttomAdInfo"></base-ad>

			</view>
			<!-- #endif -->

			<!-- #ifdef APP-ANDROID || H5 -->
			<view class="ad-box" style="height: 250px;">
				<base-ad :adInfo="buttomAdInfo" v-if="buttomAdInfo"></base-ad>

			</view>
			<!-- #endif -->
		</view>
		<view class="u-p-20">
			<!-- 推荐商品 -->
			<view class="">
				<view class="u-font-30 u-weight">推荐商品</view>
				<view class=" u-flex u-flex-wrap">
					<view class="u-w-335 bg_FFFFFF u-m-l-10 u-m-r-10 u-m-b-20 u-b-r-16"
						v-for="(item,index1) in shopList" :key="index1"
						@click="$u.route(`/pages/home/paymassage?num=${item.spu}`)">
						<u-image :src="item.imgs[0]" mode="aspectFit" width="335rpx" height='335rpx'>
						</u-image>
						<view class="u-p-20">
							<view class="cl_1C1C1CFF u-weight text-cut">{{item.name}}</view>
							<view class="u-p-t-20">
								<view class="u-flex">
									<u-image v-if="item.is_bjg==1"
										src="https://www.sqkjkj.vip/wxImg/common/home/img10.png" mode="aspectFill"
										width="68rpx" height='30rpx'></u-image>
									<view class="cl_FC3533FF u-font-30 u-weight">￥{{item.price}}</view>
								</view>
								<view class="u-m-t-10 u-text-right cl_848484FF u-font-24">已售{{item.sales}}</view>
							</view>
							<view class="u-flex  u-p-t-20">
								<u-image :src="item.shop_logo" mode="aspectFill" width="44rpx" height='44rpx'>
								</u-image>
								<view class="cl_848484FF u-m-l-10 u-font-20">{{item.shop_name}}</view>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" icon-type="circle" margin-bottom="20" />
			</view>

		</view>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
	export default {
		data() {
			return {
				params: {
					page: 1,
					page_size: 20,
				},
				shopList: [],
				// 展示签到规则
				all: false,
				status: 'loadmore',
				topAdInfo: null,
				queryInfo: {

				},
				buttomAdInfo: null,

			}
		},
		onLoad(options) {
			const goodsName = options.goodsName ? options.goodsName : options.name
			const payType = options.payType ? options.payType : options.type
			const payMoney = options.payMoney ? options.payMoney : options.money
			this.queryInfo = {
				goodsName,
				payType,
				payMoney
			}
			if (options.method === 'alipay.trade.wap.pay.return') {
				this.queryInfo = {
					goodsName: "半价购平台商品",
					payType: '支付宝',
					payMoney: options.total_amount
				}
			}

		},
		onShow() {
			this.clear()
			this.like_goods()
			this.getTopAd()
			this.getButtomAd()
		},
		methods: {
			toHome() {
				uni.switchTab({
					url: '/pages/home/home'
				})
			},
			toVip() {
				// uni.navigateTo({
				// 	url: '/subcontract/Rechargemoney2/Rechargemoney2'
				// })
				uni.switchTab({
					url: '/pages/home/home'
				})
			},
			getTopAd() {
				this.$api.getAd({
					pos: 'pay_top'
				}, res => {
					console.log(res)
					this.topAdInfo = res.data.data
				})
			},
			getButtomAd() {
				this.$api.getAd({
					pos: 'pay_middle'
				}, res => {
					console.log(res)
					this.buttomAdInfo = res.data.data
				})
			},
			clear() {
				this.shopList = [];
				this.params.page = 1;
			},
			like_goods() {
				this.$api.like_goods(this.params, res => {
					if (res.data.code == 1) {
						if (res.data.data.data.length < 20) {
							this.status = 'nomore';
						} else {
							this.params.page = this.params.page + 1;
							this.status = 'loadmore';
						}
						this.shopList = this.shopList.concat(res.data.data.data);
						uni.stopPullDownRefresh();
					}
				})
			}
		}
	}
</script>

<style scoped>
	.finished {
		position: absolute;
		left: 50rpx;
		top: 50rpx;
	}

	.success-box {
		position: relative;
		background-color: #1677ff;
		/* height: 505rpx; */
		color: #fff;
		/* margin-bottom: 175rpx; */
		/* overflow: hidden; */
	}

	.success-warpper {
		display: flex;
		justify-content: center;
	}

	.success-icon {
		width: 60rpx;
		height: 60rpx;
		margin-top: 80rpx;
	}

	.pay-total {
		text-align: center;
		font-size: 70rpx;
		letter-spacing: 4rpx;
	}

	.pay-detail {
		margin: 50rpx 50rpx 0 50rpx;
		font-size: 24rpx;
	}

	.pay-detail-item {
		display: flex;
		justify-content: space-between;
		letter-spacing: 1rpx;
		margin-bottom: 10rpx;
	}

	.ad-box {
		/* position: absolute;
		left: 25rpx;
		right: 25rpx;
		top: 430rpx; */
		overflow: hidden;
		display: block;
	}

	.btn-box {
		display: flex;
		color: #1677ff;
		align-items: center;
		justify-content: center;
	}

	.btn-item {
		flex: 0 0 160rpx;
		line-height: 50rpx;
		border: 2rpx solid #1677ff;
		margin-left: 20rpx;
		text-align: center;
		font-weight: 400;
		border-radius: 8rpx;
		font-size: 24rpx;
	}

	.btn-item:last-child {
		color: #fff;
		background-color: #1677ff;
	}

	page {
		background: #F5F5F5FF !important;
	}

	.one {
		width: 750rpx;
		height: 481rpx;
		background: url("https://www.sqkjkj.vip/wxImg/common/sign/img1.png") no-repeat;
		background-size: 100% 100%;
	}

	.two {
		width: 429rpx;
		height: 91rpx;
		left: 160rpx;
		top: 280rpx;
		background: url("https://www.sqkjkj.vip/wxImg/common/sign/img2.png") no-repeat;
		background-size: 100% 100%;
	}

	.pay-box {
		padding-bottom: 20px;
	}

	.pay-icon {
		margin: 30px auto;
		display: flex;
		justify-content: center;
	}
</style>